<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <el-card
        class="box-card"
        :body-style="{ padding: '0' }"
        @click="router.push('/order_list?state=2')"
      >
        <div class="hall-title">
          <el-icon>
            <bell-filled />
          </el-icon>
          <span style="vertical-align: middle">订单待发货</span>
        </div>
        <div class="hall-count">{{ detailData.orderWaitSend }}</div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card
        class="box-card"
        :body-style="{ padding: '0' }"
        @click="router.push('/appeal_list?state=1')"
      >
        <div class="hall-title">
          <el-icon>
            <bell-filled />
          </el-icon>
          <span style="vertical-align: middle">售后待处理</span>
        </div>
        <div class="hall-count">{{ detailData.appealWaitConfirm }}</div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card
        class="box-card"
        :body-style="{ padding: '0' }"
        @click="router.push('/appeal_list?state=3')"
      >
        <div class="hall-title">
          <el-icon>
            <bell-filled />
          </el-icon>
          <span style="vertical-align: middle">售后待补发</span>
        </div>
        <div class="hall-count">{{ detailData.appealWaitReply }}</div>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card
        class="box-card"
        :body-style="{ padding: '0' }"
        @click="router.push('/capital_list')"
      >
        <div class="hall-title">
          <el-icon>
            <bell-filled />
          </el-icon>
          <span style="vertical-align: middle">提现待处理</span>
        </div>
        <div class="hall-count">{{ detailData.capitalWaitConfirm }}</div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { BellFilled } from '@element-plus/icons-vue';
import { actionStatModule } from '@/apis/stat';

import { useRouter } from 'vue-router';
const router = useRouter();

// 加载状态(默认true)
const isLoading = ref(true);

interface WaitOperate {
  orderWaitSend: number;
  appealWaitConfirm: number;
  appealWaitReply: number;
  capitalWaitConfirm: number;
}

const detailData = ref<WaitOperate>({
  orderWaitSend: 0,
  appealWaitConfirm: 0,
  appealWaitReply: 0,
  capitalWaitConfirm: 0
});

actionStatModule<WaitOperate>('statByWaitOperate', {}).then((res) => {
  detailData.value = res.data;
  isLoading.value = false;
});
</script>

<style lang="scss" scoped>
.box-card {
  cursor: pointer;
  margin-bottom: var(--el-main-padding);
  color: #fff;
  background-color: #409eff;

  .hall-title {
    display: flex;
    align-items: center;
    line-height: 24px;
    padding: 8px;
    font-size: 18px;
    .el-icon {
      margin-right: 8px;
    }
  }

  .hall-count {
    line-height: 40px;
    font-size: 32px;
    padding: 8px;
    text-align: right;
  }
}
</style>
